<template>
  <a-card>
    <!-- 头部按钮 -->
    <template #extra>
      <a-button
        type=""
        style="margin-right: 10px"
        v-if="isEdit"
        @click="onCancelEdit"
        >取消编辑</a-button
      >
      <a-button
        type="primary"
        style="margin-right: 10px"
        @click="onEdit"
        v-if="!isEdit"
        >编辑</a-button
      >
      <a-button type="primary" @click="onSubmit" v-if="isEdit">提交</a-button>
    </template>
    <!-- 主体 -->
    <a-descriptions bordered>
      <!-- 质量监督手续办理 -->
      <a-descriptions-item label="质量监督手续办理" :span="2">
        <div v-if="isEdit">
          <a-select v-model:value="editSupervisionList.zljdsxbl">
            <a-select-option value="0">完成</a-select-option>
            <a-select-option value="1">未完成</a-select-option>
          </a-select>
        </div>
        <div v-else>
          {{ supervisionList?.zljdsxbl === "0" ? "完成" : "未完成" }}
        </div>
      </a-descriptions-item>
      <!-- 办理时间 -->
      <a-descriptions-item label="办理时间" :span="2">
        <div v-if="isEdit">
          <a-date-picker
            v-model:value="editSupervisionList.blTime"
            @change="onDataChange"
          />
        </div>
        <div v-else>{{ supervisionList.blTime }}</div>
      </a-descriptions-item>
      <!-- 监督文件 -->
      <a-descriptions-item label="监督文件" :span="2">
        <div v-if="isEdit">
          <a-upload
            :file-list="fileListOfJd"
            :remove="handleRemoveOfJd"
            :before-upload="beforeUploadOfJd"
            :multiple="true"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              点击上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <div v-for="item in supervisionList.jdwj" :key="item.id">
            <a
              :href="`${http}/api/project/constructionPreparation/download?id=${item.id}`"
              >{{ item.name }}</a
            >
          </div>
        </div>
      </a-descriptions-item>
      <!-- 项目划分表 -->
      <a-descriptions-item label="项目划分表" :span="2">
        <div v-if="isEdit">
          <a-upload
            :file-list="fileListOfHfb"
            :remove="handleRemoveOfHfb"
            :before-upload="beforeUploadOfHfb"
            :multiple="true"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              点击上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <div v-for="item in supervisionList.xmhfb" :key="item.id">
            <a
              :href="`${http}/api/project/constructionPreparation/download?id=${item.id}`"
              >{{ item.name }}</a
            >
          </div>
        </div>
      </a-descriptions-item>
      <!-- 项目说明书 -->
      <a-descriptions-item label="项目划分说明书" :span="3">
        <div v-if="isEdit">
          <a-upload
            :file-list="fileListOfSms"
            :remove="handleRemoveOfSms"
            :before-upload="beforeUploadOfSms"
            :multiple="true"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              点击上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <div v-for="item in supervisionList.xmhfsms" :key="item.id">
            <a
              :href="`${http}/api/project/constructionPreparation/download?id=${item.id}`"
              >{{ item.name }}</a
            >
          </div>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script setup>
import global from "../../global/global.vue";
import { ref } from "vue";
import {
  getQualitySupervisionList,
  qualitySupervisionSaveOrUpdate,
  qualityMultifileUpload,
} from "@/api/module/constructionPreparation";
import { message } from "ant-design-vue";

const http = process.env.VUE_APP_API_BASE_URL;

// 项目id
const projectId = global.xmid;

// 是否点击编辑
const isEdit = ref(false);

const paramsUpdata = ref({
  zljdsxbl: "",
  blTime: "",
  jdwj: "",
  xmhfb: "",
  xmhfsms: "",
  id: "",
});

// 获取页面列表
const supervisionList = ref({});
const getQualitySupervisionListData = async () => {
  const res = await getQualitySupervisionList({ id: projectId });
  console.log(res);
  supervisionList.value = res.data;
};
getQualitySupervisionListData();

// 点击时间事件
const onDataChange = (date, dateString) => {
  editSupervisionList.value.blTime = dateString;
};

// 文件上传
const fileListOfJd = ref([]);
const fileListOfHfb = ref([]);
const fileListOfSms = ref([]);
// 删除文件
// 公共逻辑
const publicHandleRemove = (fileList, file, type) => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
  if (type === "1") {
    paramsUpdata.value.jdwj = paramsUpdata.value.jdwj.filter(
      (item) => item !== file.id
    );
  }
  if (type === "2") {
    paramsUpdata.value.xmhfb = paramsUpdata.value.xmhfb.filter(
      (item) => item !== file.id
    );
  }
  if (type === "3") {
    paramsUpdata.value.xmhfsms = paramsUpdata.value.xmhfsms.filter(
      (item) => item !== file.id
    );
  }
};
const handleRemoveOfJd = (file) => {
  publicHandleRemove(fileListOfJd, file, "1");
};
const handleRemoveOfHfb = (file) => {
  publicHandleRemove(fileListOfHfb, file, "2");
};
const handleRemoveOfSms = (file) => {
  publicHandleRemove(fileListOfSms, file, "3");
};
// 上传之前
// 公共逻辑
const publicBeforeUpload = (fileList, file) => {
  const allowedTypes = ["doc", "docx", "xls", "xlsx", "pdf"];
  const fileType = file.name
    .slice(file.name.lastIndexOf(".") + 1)
    .toLowerCase();
  const isType = allowedTypes.includes(fileType);
  if (!isType) {
    return message.error("上传文件格式错误!");
  }
  fileList.value = [...fileList.value, file];
};
const beforeUploadOfJd = (file) => {
  publicBeforeUpload(fileListOfJd, file);
  return false;
};
const beforeUploadOfHfb = (file) => {
  publicBeforeUpload(fileListOfHfb, file);
  return false;
};
const beforeUploadOfSms = (file) => {
  publicBeforeUpload(fileListOfSms, file);
  return false;
};

// 编辑数据
// const isUploadNumOfJd = ref(0);
// const isUploadNumOfHfb = ref(0);
// const isUploadNumOfSms = ref(0);
// 编辑的数据
const editSupervisionList = ref();
const onEdit = () => {
  isEdit.value = true;
  // 数据赋值给编辑数据
  editSupervisionList.value = Object.assign({}, supervisionList.value);
  // 赋值fileList
  fileListOfJd.value = editSupervisionList.value.jdwj;
  fileListOfHfb.value = editSupervisionList.value.xmhfb;
  fileListOfSms.value = editSupervisionList.value.xmhfsms;
  // 赋值文件id
  paramsUpdata.value.jdwj = editSupervisionList.value.jdwj.map(
    (item) => item.id
  );
  paramsUpdata.value.xmhfb = editSupervisionList.value.xmhfb.map(
    (item) => item.id
  );
  paramsUpdata.value.xmhfsms = editSupervisionList.value.xmhfsms.map(
    (item) => item.id
  );
};

// 点击取消编辑
const onCancelEdit = () => {
  isEdit.value = false;
};

// 点击提交
// 上传文件公共逻辑
const publicUpoad = async (fileList, file, type) => {
  // const formData = new FormData();
  // fileList.value.forEach((item) => {
  //   formData.append("files", item);
  // });
  // formData.append("type", type);
  // const res = await qualityMultifileUpload(formData);
  // // 数据处理
  // if (type === "1") {
  //   paramsUpdata.value.jdwj = res.data["1"].join(",");
  // } else if (type === "2") {
  //   paramsUpdata.value.xmhfb = res.data["2"].join(",");
  // } else if (type === "3") {
  //   paramsUpdata.value.xmhfsms = res.data["3"].join(",");
  // }

  // 新增了文件，有或者没有旧文件
  if (fileList.value.length !== paramsUpdata.value[file].length) {
    console.log("进来了");
    fileList.value.splice(0, paramsUpdata.value[file].length);
    const formData = new FormData();
    fileList.value.forEach((item) => {
      formData.append("files", item);
    });
    formData.append("type", type);
    const res = await qualityMultifileUpload(formData);
    paramsUpdata.value[file] = paramsUpdata.value[file].concat(res.data[type]);
  }
  //  没有新增，直接处理数据
  paramsUpdata.value[file] = paramsUpdata.value[file].join(",");
};

const onSubmit = async () => {
  // 上传
  await Promise.all([
    publicUpoad(fileListOfJd, "jdwj", "1"),
    publicUpoad(fileListOfHfb, "xmhfb", "2"),
    publicUpoad(fileListOfSms, "xmhfsms", "3"),
  ]);
  console.log(paramsUpdata.value);
  // 提交
  paramsUpdata.value.zljdsxbl = editSupervisionList.value.zljdsxbl;
  paramsUpdata.value.blTime = editSupervisionList.value.blTime;
  paramsUpdata.value.id = editSupervisionList.value.id;
  paramsUpdata.value.xmid = projectId;
  await qualitySupervisionSaveOrUpdate(paramsUpdata.value);
  getQualitySupervisionListData();
  message.success("提交成功");
  isEdit.value = false;
};
</script>

<style lang="less" scoped></style>
